<template>
  <div class="chat-container mb-[10px] flex">
    <!-- 左侧问题列表展示 -->
    <ChatHistorySlider class="w-64" v-show="!chatCollapsed" />
    <!-- chat聊天信息展示区域 -->
    <div class="flex-1 input-container">
      <ChatFlow />
    </div>
    <div class="flex-1 ml-[10px] bg-[#fff]">
      <ThinkingChain />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useChatBoxStore } from '@/store/chat';
  import { storeToRefs } from 'pinia';
  import { defineAsyncComponent } from 'vue';

  const chatBoxStore = useChatBoxStore();
  const { chatCollapsed } = storeToRefs(chatBoxStore);

  const ChatFlow = defineAsyncComponent(
    () => import('@/components/ChatFlow/index.vue'),
  );

  const ChatHistorySlider = defineAsyncComponent(
    () => import('./components/ChatHistorySlider.vue'),
  );
  const ThinkingChain = defineAsyncComponent(
    () => import('./components/ThinkingChain.vue'),
  );
</script>

<style scoped lang="scss">
  .chat-container {
    box-sizing: border-box;
    min-height: calc(100vh - 85px) !important;
  }

  .input-container {
    background: #fff !important;
    position: relative; // 创建定位上下文
    overflow: hidden; // 防止内容溢出

    .bottom-input-wrapper {
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      padding: 16px;

      .fixed-bottom-input {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        :deep(.ant-input) {
          padding-right: 32px;
        }
      }
    }
  }
</style>
